<template>
  <text> 分类页</text>
</template>
<script lang="ts">
  // @ts-nocheck
  import { defineComponent, reactive } from 'vue';
  import { useProvider } from '@vtj/uni-app';
  export default defineComponent({
    name: 'Category',
    setup(props) {
      const provider = useProvider({ id: '16xeh7wa', version: '1750748531174' });
      const state = reactive({
        currentTab: '首页',
        tabList: [
          {
            text: '首页',
            pagePath: '/pages/index/index',
            iconPath: 'https://picsum.photos/30/30?random=1',
            selectedIconPath: 'https://picsum.photos/30/30?random=2'
          },
          {
            text: '分类',
            pagePath: '/pages/category/category',
            iconPath: 'https://picsum.photos/30/30?random=3',
            selectedIconPath: 'https://picsum.photos/30/30?random=4'
          },
          {
            text: '我的',
            pagePath: '/pages/user/user',
            iconPath: 'https://picsum.photos/30/30?random=5',
            selectedIconPath: 'https://picsum.photos/30/30?random=6'
          }
        ]
      });
      return { state, props, provider };
    },
    methods: {
      switchTab(item) {
        if (this.state.currentTab === item.text) return;
        this.state.currentTab = item.text;
        uni.switchTab({ url: item.pagePath });
      }
    }
  })
</script>
<style lang="scss" scoped>
  .container {
    display: flex;
    flex-direction: column;
    height: 100vh;
  }
  .content {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .tabbar {
    height: 50px;
    display: flex;
    border-top: 1px solid #eee;
    background-color: #fff;
  }
  .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .tab-icon {
    width: 24px;
    height: 24px;
  }
  .tab-text {
    font-size: 12px;
    margin-top: 2px;
  }
  .active .tab-text {
    color: #007aff;
  }
</style>
